<!-- 标签选择器 -->
<!-- <style>
    /* 标签选择器一般设置一些通用样式 */
    *, html, body {
        margin: 0;
        padding: 0
    }
  a {
    text-decoration: none;
  }
  ul, li {
    list-style: none;
  }

</style> -->

<!-- 类选择器 
 定义类选择器 .类名{}
 使用类选择器 class="类名"-->
<!-- <style>
    .textColor {
      color: red;
    }
  </style>
  
  <p>第一个段落标签</p>
  <p class="textColor">第二个段落标签</p>
  <p>第三个段落标签</p> -->

  <!-- 后代选择器 
   作用：选中某个元素的后代元素
   语法：父选择器  子选择器 {CSS 属性}，父子选择器之间用空格隔开。
   .container .title - container 下的所有title都会生效
    .container>.title - container下第一层中title才会生效，>表示直系亲属
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>

  <style>
    div span {
      color: red;
    }
  </style>

</head>
<body>

  <span> span 标签</span>
  <div>
    <span>这是 div 的儿子 span</span >
  </div>
</body>
</html> -->

<!-- id 选择器 权重最高-->
<!-- #title {
    color: red
   }
   <span id="title" class="title">第一层级</span> -->
   
<!-- hover 选择器 
作用：元素的鼠标悬停状态
写法：选择器:hover {CSS 属性}，通过 :hover 实现交互。

注意：:active 需写在 :hover 后，否者 :active 不生效-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* PC 端 鼠标悬停 */
      button:hover {
        background-color: gold;
      }

      /* 移动端 按下状态 */
      button:active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button>悬我头上</button>
  </body>
</html>